<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <view
        text="1"
        name="counter"
        style="width: 100%; color: #1897ff"
        data-viewindex="storeCounter">
        <text class="title">store的counter: {{ store.counter }}</text>
      </view>
      <view>
        <button @click="addStoreCounter">store的counter+1</button>
      </view>
      <view>
        <button @click="setToken">移除ACCESS_TOKEN</button>
      </view>
      <view>
        <u-button type="primary" plain @click="addStoreCounter">主要按钮</u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/useGlobal'
import { StorageService } from '../../core'
import { EStorage } from '../../enums/storage.enum'
const store = useGlobalStore()
console.log('ACCESS_TOKEN为', StorageService.getSync(EStorage.ACCESS_TOKEN))
const addStoreCounter = () => {
  //store.setCounter(store.counter+1)
  store.$patch({
    counter: store.counter + 1,
  })
}
const setToken = () => {
  StorageService.remove(EStorage.ACCESS_TOKEN).then((res) => {
    uni.showToast({
      title: res ? '移除成功' : '移除失败',
    })
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 36rpx;
      color: $primary-theme;
    }
  }
}
</style>
